<template>
    <div class="ml-16px mr-16px content-container">
        <div class="pl-26px pt-10px pb-10px">
            <el-form ref="ruleFormRef" :model="ruleForm" label-width="110px" class="pt-26px">
                <el-form-item label="关键词" prop="keyword">
                    <div class="w-600px"><el-input :disabled="true" v-model="ruleForm.keyword"></el-input></div>
                </el-form-item>
                <el-form-item label="文章标题" prop="title">
                    <div class="w-600px"><el-input :disabled="true" v-model="ruleForm.title"></el-input></div>
                </el-form-item>
                <el-form-item label="文章内容" prop="title">
                    <div class="w-90%">
                        <vue-ueditor-wrap v-model="ruleForm.content" editor-id="articleEditor" :config="editorConfig"
                            :editorDependencies="['ueditor.config.js', 'ueditor.all.js']" />
                    </div>
                </el-form-item>
            </el-form>
            <div class="w-full">
                <div class="flex ml-16px mr-16px pl-94px pb-26px">
                    <el-button :loading="loading" type="primary" @click="handleConfirm(ruleFormRef)">同步更新</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { getArticleDetailApi,editArticleApi } from '@/api/geo'
import { SuccessFilled } from '@element-plus/icons-vue'
import type { FormInstance } from 'element-plus'
import { confirmMessageBox } from '@/utils/elMessageBox'

const route = useRoute()

const router = useRouter()

const ruleFormRef = ref<FormInstance>()

const ruleForm = reactive({
    keyword:'',
    title:'',
    content:'',
})

const loading = ref(false)

const editorConfig = {
    // 后端服务地址，后端处理参考
    // https://open-doc.modstart.com/ueditor-plus/backend.html
    serverUrl: import.meta.env.VITE_APP_EDITOR_URL,
    UEDITOR_HOME_URL: '/static/UEditorPlus/',
    UEDITOR_CORS_URL: '/static/UEditorPlus/',
    /* 上传图片配置项 */
    imageActionName: 'uploadFile' /* 执行上传图片的action名称 */,
    imageFieldName: 'file' /* 提交的图片表单名称 */,
    imageMaxSize: 2048000 /* 上传大小限制，单位B */,
    imageAllowFiles: ['.png', '.jpg', '.jpeg', '.gif', '.bmp'] /* 上传图片格式显示 */,
    imageCompressEnable: true /* 是否压缩图片,默认是true */,
    imageCompressBorder: 1600 /* 图片压缩最长边限制 */,
    imageInsertAlign: 'none' /* 插入的图片浮动方式 */,
    imageUrlPrefix: '' /* 图片访问路径前缀 */,
    imagePathFormat: '' /* 上传保存路径,可以自定义保存路径和文件名格式 */,
    autoHeightEnabled:false,

    serverHeaders: {
        'Authorization': sessionStorage.getItem('X-token')
    },
}
async function getArticleDetail() {
    const id = Number(route.params.id)
    const res = await getArticleDetailApi({
        id: id
    })
    if(res.code === 200){
        ruleForm.keyword = res.data.Keyword
        ruleForm.title = res.data.ArticleTitle
        ruleForm.content = res.data.ArticleContent
    }
}

async function handleConfirm(formEl: FormInstance | undefined) {
    loading.value = true
    if (!formEl) return
    await formEl.validate(async (valid: boolean, fields: any) => {
        if (valid) {
            const res: ResType = await editArticleApi({
                ID: Number(route.params.id),
                ArticleContent: ruleForm.content,
            })
            if(res.code === 200){
                loading.value = false
                confirmMessageBox(SuccessFilled, res.message,'','',() => {
                    router.go(-1)
                })
            }
        } else {
            loading.value = false
            console.log('error submit!', fields)
        }
    })
}

onMounted(() => {
    getArticleDetail()
})
</script>

<style lang="scss">

</style>